<template>
  <div>
    <el-table
      :data="permissionArr"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      stripe
    >
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="权限值" align="center" prop="code" />
      <el-table-column label="修改时间" align="center" prop="updateTime" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="success"
            icon="Plus"
            :disabled="row.level === 4"
            @click="addPermission(row)"
          >
            {{ row.level === 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button
            type="warning"
            icon="Edit"
            :disabled="row.level === 1"
            @click="editPermission(row)"
          >
            编辑
          </el-button>
          <el-popconfirm
            title="确定要删除该权限/功能吗?"
            width="220"
            @confirm="deletePermission(row)"
          >
            <template #reference>
              <el-button
                type="danger"
                icon="Delete"
                :disabled="row.level === 1"
              >
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogVisible"
      :title="permissionParams.id ? '编辑权限' : '添加权限'"
      width="500"
    >
      <el-form label-width="70px">
        <el-form-item label="权限名称">
          <el-input
            placeholder="请输入权限名称"
            v-model="permissionParams.name"
          />
        </el-form-item>
        <el-form-item label="权限值">
          <el-input
            placeholder="请输入权限值"
            v-model="permissionParams.code"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="PermissionConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
// 引入接口
import {
  reqGetAllMenu,
  reqAddOrUpdateMenu,
  reqDeleteMenu,
} from '@/api/acl/menu'
// 引入类型
import {
  MenuParamsData,
  PermissionData,
  PermissionDataList,
  PermissionListResponseData,
} from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'

// 定义菜单权限响应式数据
let permissionArr = ref<PermissionDataList>([])
// 定义 dialog 组件是否展示
let dialogVisible = ref<boolean>(false)
// 收集添加修改功能菜单的表单数据
let permissionParams = reactive<MenuParamsData>({
  name: '',
  code: '',
  id: '',
  pid: '',
  level: '',
})

// 添加功能菜单按钮的回调
const addPermission = (row: PermissionData) => {
  permissionParams.name = ''
  permissionParams.code = ''
  permissionParams.id = ''
  permissionParams.pid = row.id as number
  permissionParams.level = (row.level as number) + 1
  dialogVisible.value = true
}
// 编辑功能菜单按钮的回调
const editPermission = (row: PermissionData) => {
  permissionParams.name = row.name
  permissionParams.code = row.code
  permissionParams.id = row.id
  permissionParams.pid = row.pid as number
  permissionParams.level = row.level as number
  dialogVisible.value = true
}
// 删除功能菜单按钮的回调
const deletePermission = async (row: PermissionData) => {
  let result = await reqDeleteMenu(row.id as number)
  if (result.code === 200) {
    ElMessage.success('删除成功')
  } else {
    ElMessage.error('删除失败')
  }
  await getAllMenu()
}
// dialog 组件确定按钮的回调
const PermissionConfirm = async () => {
  let result = await reqAddOrUpdateMenu(permissionParams)
  if (result.code === 200) {
    ElMessage.success(permissionParams.id ? '修改成功' : '添加成功')
  } else {
    ElMessage.error(permissionParams.id ? '修改失败' : '添加失败')
  }
  dialogVisible.value = false
  await getAllMenu()
}

// 页面挂载完成请求数据
onMounted(() => {
  getAllMenu()
})

// 获取所有菜单数据
const getAllMenu = async () => {
  let result: PermissionListResponseData = await reqGetAllMenu()
  if (result.code === 200) {
    permissionArr.value = result.data
  }
}
</script>

<style scoped></style>
